<template>
  <!-- 模块1 -->
  <div class="modular" v-if="showFlg">
    <div class="modular_cont">
      <h2 v-if="chartsArr">{{ chartsArr.device_name }}泵组运行参数</h2>
      <div class="card_data">
        <div class="card_item">
          <h3>出水瞬时流量: <span>{{chartsArr.water_cnt_instant}}m³</span></h3>
        </div>
        <div class="card_item">
          <h3>出水标准压力: <span>{{chartsArr.press_out_cnt}}mpa</span></h3>
        </div>
        <div class="card_item">
          <h3>进水压力: <span>{{chartsArr.press_in_cnt}}mpa</span></h3>
        </div>
        <div class="card_item">
          <h3>水箱液位: <span>{{chartsArr.water_lv}}m</span></h3>
        </div>
      </div>
      <el-table :data="tableData" stripe style="width: 95%" :header-cell-style="{ color: '#17E8FF' }">
        <el-table-column prop="cont1" :label="'监测项目'">
        </el-table-column>
        <el-table-column v-for="(item, index) in chartsArr.pumps" :prop="'cont' + (index + 2)" :key="index + 2"
          :label="item.pump_name">
        </el-table-column>
        <!-- <el-table-column prop="cont2" :label="chartsArr.pumps[0].pump_name">
        </el-table-column>
        <el-table-column prop="cont3" :label="chartsArr.pumps[1].pump_name">
        </el-table-column>
        <el-table-column prop="cont4" :label="chartsArr.pumps[2].pump_name">
        </el-table-column> -->
      </el-table>
      <div class="echarts_time_cont">
        <div class="echarts_time"></div>
      </div>
      <div class="close" @click="showFlg = false">
        <img src="@/assets/img/close.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
// import * as api from '@/assets/utils/api.js'
export default {
  props: ['msg'],
  data() {
    return {
      myChart: {},
      data: [],
      msgFlg: this.msg,
      showFlg: false,
      chartsArr: [],
      tableData: [{
        cont1: '变频器运行频率/Hz',
        cont2: '1#输出电压:0.00V',
        cont3: '1#运行电流:0.00A',
        cont4: '1#电机转速:0.00r/min',
        cont5: '1#泵状态:运行'
      },
      {
        cont1: '本次运行时间/m',
        cont2: '2#输出电压:0.00V',
        cont3: '2#运行电流:0.00A',
        cont4: '2#电机转速:0.00r/min',
        cont5: '2#泵状态:运行'
      },
      {
        cont1: '累计运行时间/h',
        cont2: '3#输出电压:0.00V',
        cont3: '3#运行电流:0.00A',
        cont4: '3#电机转速:0.00r/min',
        cont5: '3#泵状态:运行'
      }
      ]
    }
  },
  mounted() {
    this.drawLine()
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
    // console.log(this.chartsArr)
  },
  methods: {
    cont() {
      return 'cont3'
    },
    printAge(age, flag) {
      this.chartsArr = age
      this.showFlg = flag
      // this.chartsArr.pumps.forEach((item,index) => {
      //   this.tableData[index].cont2 = item.run_frequency
      //   this.tableData[index].cont3 = item.run_time
      //   this.tableData[index].cont4 = item.run_time_cnt
      //   console.log(this.tableData[index].cont4)
      // })
      this.tableData = [{
        cont1: '变频频率/Hz',
        cont2: this.chartsArr.pumps[0].run_frequency,
        cont3: this.chartsArr.pumps[1].run_frequency,
        cont4: this.chartsArr.pumps[2].run_frequency,
      },
      {
        cont1: '运行时间/m',
        cont2: this.chartsArr.pumps[0].run_time,
        cont3: this.chartsArr.pumps[1].run_time,
        cont4: this.chartsArr.pumps[2].run_time,
      },
      {
        cont1: '累计时间/h',
        cont2: this.chartsArr.pumps[0].run_time_cnt,
        cont3: this.chartsArr.pumps[1].run_time_cnt,
        cont4: this.chartsArr.pumps[2].run_time_cnt,
      }
      ]
    },
    // closeBtn() {
    //   this.msgFlg = !this.msgFlg
    //   this.$emit('closeInfo', this.msgFlg)
    // },
    transformTimestamp(timestamp) {
      let a = new Date(timestamp).getTime()
      const date = new Date(a)
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  '
      // const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      // const s = date.getSeconds(); // 秒
      // const dateString = Y + M + D + h + m
      const dateString = Y + M + D
      return dateString
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.querySelector('.echarts_time'))
      this.myChart = myChart
      myChart.setOption({
        xAxis: {
          type: 'category',
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLabel: {
            textStyle: {
              color: '#50D5FD'
            }
          },
          axisLine: {
            lineStyle: { color: '#00CCFF' }  //y轴坐标轴颜色
          },
          data: [
            '16:00:23',
            '16:00:23',
            '16:00:23',
            '16:00:23',
            '16:00:23',
            '16:00:23',
            '16:00:23'
          ]
        },
        yAxis: {
          type: 'value',
          show: false,
          splitLine: {
            //网格线
            show: false
          }
        },
        grid: {
          // right: '20%',
          x: '0%',//x 偏移量
          y: '30%', // y 偏移量
          width: '100%', // 宽度
          height: '45%'
        },
        series: [
          {
            data: [200, 100, 300, 200, 300, 400, 200],
            type: 'line',
            smooth: true,
            showSymbol: false
          },
          {
            data: [100, 200, 200, 300, 400, 300, 100],
            type: 'line',
            smooth: true,
            showSymbol: false
          },
          {
            data: [300, 200, 300, 100, 200, 300, 150],
            type: 'line',
            smooth: true,
            showSymbol: false
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.modular {
  background: url(@/assets/img/run.png) no-repeat center;
  background-size: 100% 100%;
  border: none !important;

  .modular_cont {
    position: relative;

    .card_data {
      width: 100%;
      margin: 0.2rem 0;
      display: flex;
      justify-content: space-between;

      .card_item {
        width: 25%;

        h3 {
          color: #17E8FF;
          font-size: 0.16rem;
          text-align: center;
          font-family: "Pang";
          span {
            color: #fff;
          }
        }
      }
    }

    .close {
      position: absolute;
      right: 0.25rem;
      top: 0;
      display: flex;

      img {
        width: 0.15rem;
        cursor: pointer;
      }
    }

    h2 {
      font-size: .22rem;
      color: #fff;
      font-family: "Pang";
      margin: .12rem 0 .09rem 0.25rem;
    }

    .el-table {
      margin: 0 auto;
    }

    .echarts_time_cont {
      width: 85%;
      height: 1.2rem;
      margin: 0 auto;

      .echarts_time {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>